.notice {
  width: 100%;
  position: fixed;
  z-index: 8001;
  top: 0;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);

  .message {
    width: 100%;
    // margin-bottom: 15px;
    overflow: hidden;
    transition: all .5s;
    opacity: 0;
    animation: slide-in .5s ease .1s forwards;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    .content {
      font-size: 30upx;
      text-align: center;
      padding: 20upx 40upx;
      box-sizing: border-box;
    }
    
    &.primary {
      color: #fff;
      background: #4A6EF3;
      border-color: #4A6EF3;
    }

    &.info {
      color: #909399;
      background: #EDF2FC;
      border-color: #EBEEF5;
    }

    &.success {
      color: #67C23A;
      background: #F0F9EB;
      border-color: #e1f3d8;
    }

    &.error {
      color: #F56C6C;
      background: #FEF0F0;
      border-color: #fde2e2;
    }

    &.warning {
      color: #E6A23C;
      background: #FDF6EC;
      border-color: #faecd8;
    }
  }
}

@keyframes slide-in {
  from {
    opacity: 0;
    // transform: translateY(0);
  }

  to {
    opacity: 1;
    // transform: translateY(30px);
  }
}